import { t } from 'i18next'
import React, { FC } from 'react'
import { EndBtnIcon, PauseBtnIcon, StartBtnIcon, StyledMccMtVideo } from './style'
import { RightWrap } from '../../components'
import useHookData from './hooks'
import { Button, Table } from '@kedacom/react-next'
import { useMccStore } from '../../store'
import { actionButtonsCancel } from '../../store.actionButton'

const MccMtVideoView: FC = () => {
	const { columns, tableData, ...useData } = useHookData()
	return (
		<StyledMccMtVideo className="mcc-mt-video-wrap">
			<RightWrap
				title={t('终端录像')}
				onBack={() => {
					useMccStore.getState().setCurPage('mcc_main')
					actionButtonsCancel()
				}}
				action={<Button onClick={() => useData.stopVideo(true)}>{t('结束全部录像')}</Button>}
			>
				<div className="table-title-wrap">
					<div className="table-title">{t('录像列表')}</div>
					<div className="icon-wrap" onClick={() => useData.startVideo()}>
						<StartBtnIcon className="start-btn-icon"></StartBtnIcon>
						<span className="icon-text">{t('开始')}</span>
					</div>
					<div className="icon-wrap" onClick={() => useData.pauseVideo()}>
						<PauseBtnIcon className="pause-btn-icon"></PauseBtnIcon>
						<span className="icon-text">{t('暂停')}</span>
					</div>
					<div className="icon-wrap" onClick={() => useData.stopVideo(false)}>
						<EndBtnIcon className="end-btn-icon"></EndBtnIcon>
						<span className="icon-text last">{t('结束')}</span>
					</div>
				</div>
				<Table
					showOrderColumn={false}
					columns={columns}
					data={tableData}
					selectedRowIds={useData.selectedRowIds}
					onRowSelect={(e, rowData, id: any, nextSelected, index) =>
						useData.onRowSelect(e, rowData, id, nextSelected, index)
					}
					onRowSelectAll={(e, selectedRowData, selectedRowIds, nextSelected) =>
						useData.onRowSelectAll(e, selectedRowData, selectedRowIds, nextSelected)
					}
					onRowClick={(e, rowData, id: any, selected, index) =>
						useData.onRowClick(e, rowData, id, selected, index)
					}
					i18n={{ order: t('序号') }}
					nodata={t('暂无数据')}
				></Table>
			</RightWrap>
		</StyledMccMtVideo>
	)
}
export default MccMtVideoView
